<template>
  <div>
    <el-dialog v-model="dialogVisible" width="30%" :before-close="handleClose">
      <span>登录超时，请返回登录页重新登录！</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定关闭弹窗?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

//暴露出值和方法，供父组件调用
defineExpose({
  dialogVisible
});
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
